import PropTypes from 'prop-types';
// import classnames from 'classnames';
import React from 'react';
import chunk from 'lodash/chunk';
import css from './index.less';


export default class RenderClass extends React.Component {

  static propTypes = {
    itemDetail: PropTypes.array.isRequired,

  };

  static defaultProps = {


  };


  constructor(props) {
    super(props);
    this.state = {
      active: 0,
    };

    this.itemDetail = props.itemDetail;


    // console.log('this.itemDetail', this.itemDetail);
    // console.log('this.itemDetail', props.classInd);
  }

  componentDidMount() {

    this.newSwiper();
  }

  componentWillUnmount() {

  }


  newSwiper = () => {
    const that = this;
    this.swiper2 = new Swiper('.swiper2', {
      // loop: true,
      initialSlide: 0,
      direction: 'horizontal',
      // centeredSlides: false, // 这两个属性是网格分布
      slidesPerView: 'auto',
      spaceBetween: 20,
      // loopedSlides: 6,
      // speed: 10000,
      // autoplay: {  // 组件卸载后会继续执行定时器
      //   delay: 0,
      //   disableOnInteraction: false,
      //   waitForTransition: false,
      // },
    });
  };

  click(e) {
    const { getId = () => {}, } = this.props;
    e.stopPropagation();
    let id = e.target.getAttribute('data-id');
    // console.log('e.target', e.target.getAttribute('data-id'));
    getId(id);
  }

  renderItem(item, index) {
    // console.log('item===', item);
    const imgProps = {
      // src: `${item.picUrl}_q80_.webp`,
      className: css.img,
    };

    return (
      item.map( (it, ind) => {
        const boxProps = {
          key: ind,
          className: css.box,
          style: {
            marginLeft: '15px',
            marginTop: '15px',
            // background: `url(${itemBg}) no-repeat`,
            background: '#ffffff',
          },
        };
        return (
          <div {...boxProps} data-id={it.goodsTaobaoId} >
            <img {...imgProps} src={`${it.picUrl}_q80_.webp`} data-id={it.goodsTaobaoId}/>
            <div className={css.title} data-id={it.goodsTaobaoId}>{it.title}</div>
          </div>
        );
      })
    );

  }


  renderGoods() {
    let newItem = this.itemDetail[this.props.classInd].goods;
    let goods= chunk(newItem, 2);

    const imgProps = {
      // src: `${item.picUrl}_q80_.webp`,
      className: css.img,
    };
    return (
      goods.map((item, index) => {
        // console.log('item', item);
        const boxProps = {
          key: index,
          className: css.box,
        };
        return (
          <div className={'swiper-slide'} key={index}>
            {this.renderItem(item, index)}
          </div>
        );
      })
    );
  }

  render() {

    return (
      <div onClick={this.click.bind(this)}>
        <div className="swiper-container swiper2">
          <div className="swiper-wrapper">
            {
              this.renderGoods()
            }
          </div>
        </div>
      </div>
    );
  }
}
